<template>
  <div class="litchi-type-container">
    <h2 class="title">粤西荔枝品种</h2>

    <div class="type-list">
      <div
        v-for="item in litchiData"
        :key="item.id"
        class="type-card"
        @click="showDetail(item)"
      >
        <div class="type-image">
          <img :src="item.imageUrl" :alt="item.varietyName" />
        </div>
        <div class="type-content">
          <h3 class="type-name">{{ item.varietyName }}</h3>
          <p class="type-desc">{{ item.description }}</p>
        </div>
      </div>
    </div>

    <!-- 新增评论模块 -->
    <div
      class="comment-section"
      style="
        margin-top: 40px;
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      "
    >
      <h3 style="color: #c23531; margin-bottom: 20px">发表评论</h3>

      <!-- 评论输入区 -->
      <div class="comment-input-area" style="margin-bottom: 20px">
        <el-input
          v-model="commentContent"
          type="textarea"
          :rows="4"
          placeholder="请写下您对粤西荔枝品种的看法..."
          style="margin-bottom: 15px"
        />

        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" size="medium" @click="submitComment">
            发表评论
          </el-button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <h4 style="color: #333; margin-bottom: 15px">
          评论 ({{ comments.length }})
        </h4>
        <div
          v-if="comments.length === 0"
          style="text-align: center; padding: 30px 0; color: #999"
        >
          暂无评论，快来发表第一条评论吧~
        </div>

        <div
          v-for="(comment, index) in comments"
          :key="index"
          class="comment-item"
          style="padding: 15px 0; border-bottom: 1px solid #f0f0f0"
        >
          <div style="display: flex; align-items: center; margin-bottom: 8px">
            <span style="font-weight: bold; margin-right: 10px">{{
              comment.username
            }}</span>
            <span style="font-size: 12px; color: #999">{{
              comment.createTime
            }}</span>
          </div>
          <p style="color: #333; line-height: 1.6; text-indent: 2em">
            {{ comment.content }}
          </p>
        </div>
        <div
          v-if="comments.length > 0"
          style="text-align: center; margin-top: 15px"
        >
          <el-button @click="loadMoreComments" plain>加载更多</el-button>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogVisible" width="50%">
      <div style="display: flex; gap: 20px">
        <div>
          <img
            :src="currentItem.imageUrl"
            :alt="currentItem.varietyName"
            style="
              width: 200px;
              height: 200px;
              object-fit: cover;
              border-radius: 8px;
            "
          />
          <p
            style="
              text-align: center;
              margin-top: 10px;
              color: #c23531;
              font-weight: bold;
            "
          >
            {{ currentItem.varietyName }}
          </p>
          <p style="margin-bottom: 15px; line-height: 1.6">
            {{ currentItem.description }}
          </p>
        </div>
        <div>
          <div v-if="currentItem.cultureStory">
            <h4>品种故事</h4>
            <p>{{ currentItem.cultureStory }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { getLitchiDataService } from "@/api/litchi/litchi";
import { ref } from "vue";
import { ElMessage, ElDialog, ElCard } from "element-plus";
import { onMounted } from "vue";
import { insertCommentService } from "@/api/comment/comment";
import { useUserInfoStore } from "@/stores/userinfo";
import { useUserPermissionStore } from "@/stores/userpermission";

const litchiData = ref([]);
const dialogVisible = ref(false);
const currentItem = ref({});

// 新增评论相关代码
const userInfoStore = useUserPermissionStore();

const commentContent = ref("");
const comments = ref([]);
//分页获取评论
//构建分页查询参数
// 添加分页相关变量
const pageQuery = ref({
  pageNum: 1,
  pageSize: 10,
});

//获取评论列表
import { getCommentService } from "@/api/comment/comment";
//更多评论
const loadMoreComments = () => {
  pageQuery.value.pageNum++;
  getComments();
};
// 在getComments方法中添加分页结束判断
const hasMore = ref(true);

const getComments = async () => {
  if (!hasMore.value) return;

  try {
    const res = await getCommentService({
      pageNum: pageQuery.value.pageNum,
      pageSize: pageQuery.value.pageSize,
      status: 2,
    });

    if (res.data.rows.length === 0) {
      hasMore.value = false;
      ElMessage.info("没有更多评论了");
      return;
    }

    comments.value = [...comments.value, ...res.data.rows];
  } catch (error) {
    // error handling
  }
};

// 发表评论
const submitComment = async () => {
  if (!commentContent.value.trim()) {
    ElMessage.warning("评论内容不能为空");
    return;
  }

  // 正确打印用户信息
  console.log("用户数据:", userInfoStore.info);
  console.log("用户ID:", userInfoStore.info?.userId);
  try {
    const res = await insertCommentService({
      content: commentContent.value,
      userId: userInfoStore.userInfo.id,
    });

    ElMessage.success("评论发表成功,正在等待审核...");
    commentContent.value = "";
    // 这里可以添加刷新评论列表的逻辑
  } catch (error) {
    ElMessage.error("发表评论时出错");
    console.error(error);
  }
};
const getLitchiData = async () => {
  try {
    const response = await getLitchiDataService();
    if (response.code === 0 && response.data) {
      litchiData.value = response.data;
    } else {
      ElMessage.error(response.message || "获取数据失败");
    }
  } catch (error) {
    ElMessage.error(error.message || "请求失败");
  }
};

const showDetail = (item) => {
  currentItem.value = item;
  dialogVisible.value = true;
};

onMounted(() => {
  getLitchiData();
  getComments();
});
</script>

<style scoped>
.litchi-type-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #c23531;
  font-size: 28px;
}

.type-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
}

.type-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.type-image {
  height: 200px;
  overflow: hidden;
}

.type-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.type-card:hover .type-image img {
  transform: scale(1.05);
}

.type-content {
  padding: 15px;
}

.type-name {
  color: #c23531;
  margin-bottom: 10px;
  font-size: 20px;
}

.type-desc {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.type-story {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 6px;
  margin-top: 15px;
}

.type-story h4 {
  color: #333;
  margin-bottom: 8px;
  font-size: 16px;
}

.type-story p {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}
</style>